<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css" >
body{margin:50px;padding:50px;}
</style>
</head>
<body>

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    食物
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">水果</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">蔬菜</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">主食</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
  </ul>
</div>
<br>
<script src="js/jquery-1.11.3.min.js"></script>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"> 选择你喜欢的水果 <span class="caret"></span> </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
      <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
      <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    </ul>
  </div>
  <script src="js/bootstrap.min.js"></script> 
</body>
</html>